<template>
  <div :id="props.id" class="charts wh100"></div>
</template>

<script lang="ts" setup name="HzChinaMap">
import {onMounted } from 'vue';
import * as echarts from 'echarts';
import dataJson from '/@/assets/China-map-data.json';
import {getEchartsTextColor, getEchartsTheme} from "/@utils/GlobalFunction";
import {loadEchartsData} from "/@api/hz-bigscreen-api";

// eslint-disable-next-line no-undef
const props = defineProps({
  id: {
    type: String,
    default: 'map-China'
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: '各城市分布'
  },
  data: {
    type: Object,
    default: () => {
      return [
        {name: '台湾', value: 0},
        {name: '西藏', value: '125'},
        {name: '北京', value: '100000000'},
        {name: '辽宁', value: '12829'},
        {name: '浙江', value: '12957'},
        {name: '广西', value: '22924'},
        {name: '海南', value: '22875'},
        {name: '重庆', value: '32060'},
        {name: '香港', value: '2914'},
        {name: '河北', value: '2951'},
        {name: '福建', value: '2978'},
        {name: '湖南', value: '2968'},
        {name: '宁夏', value: '2925'},
        {name: '陕西', value: '2901'},
        {name: '澳门', value: '2960'},
        {name: '山西', value: '3000'},
        {name: '内蒙', value: '3002'},
        {name: '甘肃', value: '2934'},
        {name: '贵州', value: '2948'},
        {name: '湖北', value: '3014'},
        {name: '天津', value: '3020'},
        {name: '四川', value: '2848'},
        {name: '黑龙江', value: '2947'},
        {name: '广东', value: '2885'},
        {name: '山东', value: '2963'},
        {name: '新疆', value: '2931'},
        {name: '河南', value: '2995'},
        {name: '吉林', value: '2982'},
        {name: '上海', value: '32945'},
        {name: '青海', value: '3000'},
        {name: '江西', value: '2850'},
        {name: '安徽', value: '2915'},
        {name: '江苏', value: '22868'},
        {name: '云南', value: '2968'},
        {name: '内蒙古', value: '120'},
      ]
    }
  },
  apiPath: { // api路径
    type: String,
    default: ''
  },
  chartsType: { // 图表类型
    type: String,
    default: 'mapChina'
  },
  methodType: {
    type: String, // 请求方式
    default: 'get'
  }
});

const option = {
  title: {
    text: props.title,
    left: 'center',
    textStyle: {
      color: '#ffffff'
    },
    show:props.showTitle
  },
  geo: {
    map: 'china',
    aspectScale: 0.75,
    zoom: 1.1,
    top: '10%',
    left: 'center',
  },
  tooltip: {
    formatter: '{b}:{c}',
  },
  visualMap: {
    min: 0,
    max: getMaxDataValue(),
    left: '10%',
    top: 'bottom',
    text: ['高', '低'],
    calculable: true,
    color: ['#0b50b9', '#FFFFFF'],
  },
  series: [
    {
      zoom: 1.1,
      map: 'china',
      type: 'map',
      itemStyle: {
        // borderColor: 'rgba(0, 0, 0, 0.2)',
        borderColor: '#3ad6ff', // 省分界线颜色  阴影效果的
        borderWidth: 1,
        areaColor: '#17348b',
        opacity: 1,
      },
      emphasis: {
        itemStyle: {
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          areaColor: '#e1b919',
        },
        label: {
          show: true,
        },
      },
      label: {
        show: true,
      },
      // data: dataList.value,
      data: props.data,
    },
  ],
};

// 画布的宽高
const canvas = ref({
  width: 1920,
  height: 963
})

const scale = ref(1)
const basicBar = ref();
function getMaxDataValue() {
  // 动态计算数据的最大值
  return Math.max(...props.data.map(item => item.value));
}
const drawLine = async () => {
  // let myChart = echarts.init(document.getElementById('main'));
  basicBar.value = markRaw(echarts.init(document.getElementById(props.id), getEchartsTheme));
  let uploadDataUrl = dataJson;
  echarts.registerMap('china', uploadDataUrl);
  // 动态计算数据的最大值
  // const maxDataValue = Math.max(...props.data.map(item => item.value));

  basicBar.value.setOption(option);
  window.onresize = function () {
    basicBar.value.resize();
  };
};

onMounted(() => {
  scale.value = Math.min(window.innerWidth/canvas.value.width, window.innerHeight/canvas.value.height)
  //@ts-ignore
  document.body.style.zoom = scale.toString()
  drawLine();
  // initMap();
});

// 解决全局缩放导致的echarts canvas鼠标位置不准确的问题
const updateZoom = () => {
  const zoomValue = 1 / scale.value;
  const chartContainer = document.getElementById(props.id);
  if (chartContainer) {
    chartContainer.style.zoom = zoomValue.toString();
  }
};
function resetOption() {
  option.title.textStyle.color = getEchartsTextColor()
}
// 监听 scale 的变化
watch(scale, () => {
  updateZoom();
});
// @ts-ignore
watch(getEchartsTheme, () => {
  resetOption()
  drawLine()
});

// 刷新图表方式，该方法需要提供给外部调用
// eslint-disable-next-line no-unused-vars
const refreshCharts = (data : any) => {
  option.title.text = data.title;
  option.series[0].data = data.data as number[];
  drawLine()
};
// 刷新图表  根据apiPath，method，type query获取数据
const refreshChartsByApi = async (query : any) => {
  // 如果query中没有封装type则给query添加type属性
  if (!query.hasOwnProperty('chart_type')) {
    query.chart_type = props.chartsType
  }
  const s = await loadEchartsData(props.apiPath, props.methodType, query)
  refreshCharts(s.data)
}

// 重置图表大小
const resizeEcharts = () => {
  basicBar.value.resize();
}
// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
  resizeEcharts,
  refreshChartsByApi
});

</script>
<style scoped>

.charts {
  min-height: 100px;
  min-width: 130px;
}

.charts:first-child div {
  position: static !important;
  width: 100% !important;
}

/deep/ canvas {
  width: 100% !important;
  height: 100% !important;
}
</style>